<template>
  <el-main class="el-main">
    <div class="cateList1">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in data.picListData" :key="item.id">
          <el-card
            style="margin-bottom: 15px; position: relative"
            shadow="hover"
          >
            <el-image
              :src="item.url"
              style="width: 100%; height: 150px"
              fit="cover"
              :preview-src-list="[item.url]"
            ></el-image>
            <div class="pic_title">{{ item.name }}</div>
            <div class="pic_edit">
              <el-checkbox class="el-checkbox" v-model="item.checked" @change="selectImgHandle( item)"></el-checkbox>
              <span @click="openDialogVisibleEdit(item)">重命名</span>
              <span @click="delPic(item.id)">删除</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="page1">
        <el-pagination v-model:current-page="queryData.page" v-model:page-size="queryData.limit"
                :page-sizes="[8, 16, 24, 32]" size="small" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total=data.total @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
    </div>
    <!-- 图片重命名 -->
    <el-dialog v-model="data.dialogVisibleEdit" title="图片重命名" width="30%">
      <el-form :model="formPicName">
        <el-form-item>
          <el-input v-model="formPicName.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="data.dialogVisibleEdit = false">取消</el-button>
        <el-button type="primary" @click="editPicNameOk">确定</el-button>
      </template>
    </el-dialog>
  </el-main>
</template>

<script setup>
import { reactive ,ref,computed} from "vue";
import { getPicsList, editPicNameFn, delPicFn } from "@/api/pics.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { toRef } from "vue";
const queryData = reactive({
  // 图库Id
  id: 0,
  // 分页页码
  page: 1,
  // 显示条数
  limit: 8,
});
// 定义数据源
const data = reactive({
  // 图片列表
  picListData: [],
  // 数据条数
  total: 0,
  // 修改对话框
  dialogVisibleEdit: false,
});
// 重新命名数据
const formPicName = reactive({
  name: "",
  id: 0,
});
const emit = defineEmits('selectImgData')
// 获取图片列表数据
const getPics = async () => {
  const res = await getPicsList(queryData.id, queryData.page, queryData.limit);
  if (res.msg && res.msg !== "ok") {
    return;
  }
  // 获取数据成功，保存数据
  data.picListData = res.data.list.map(item => {
    item.checked = false
    return item
  })
  data.total = res.data.totalCount;
};
// 获取父组件图库分类id ,调用getPics方法
const getDataById = (id) => {
  queryData.id = id;
  // 调用api
  getPics();
};
// 重命名
const openDialogVisibleEdit = (item) => {
  formPicName.name = item.name;
  formPicName.id = item.id;
  data.dialogVisibleEdit = true;
};
const editPicNameOk = async () => {
  const res = await editPicNameFn(formPicName.id, formPicName.name);
  if (res.msg && res.msg !== "ok") {
    return;
  }
  ElMessage({
    message: "重命名成功",
    type: "success",
  });
  data.dialogVisibleEdit = false;
  getPics();
};
const delPic = async (i) => {
  const isDel = await ElMessageBox.confirm("是否删除图片", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).catch((err) => err);
  if (isDel !== "confirm") return;
  // 调用删除api
  const res = await delPicFn([i]);
  if (res.msg && res.msg !== "ok") return;
  ElMessage({
    message: "删除成功",
    type: "success",
  });
  getPics();
};
//选择分页页码
const handleCurrentChange = (val) => {
    queryData.page = val
    getPics()

}
//每页显示条数
const handleSizeChange = (val) => {
    queryData.limit = val
    getPics()
}

const checkedImg = computed(() => {
  return data.picListData.filter(item => item.checked)
}) 
const selectImgHandle = (item) => {
  if(item.checked && checkedImg.value.length > 1) {
    item.checked = false
    return ElMessage.error('只能选择一张')
  }
  console.log(checkedImg.value,"kkk")
  emit('selectImgData',checkedImg.value)
}
//重置选中数据
const resetCheck = () => {
    data.picListData = data.picListData.map(item => {
        item.checked = false
        return item
    })
}
// 共享getDataById方法
defineExpose({
  getDataById,
  resetCheck
});
</script>

<style lang="less" scoped>
.el-main {
  height: 100%;
  position: relative;
}
.cateList1 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
  box-sizing: border-box;
  .pic_title {
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #000;
    color: #fff;
    position: absolute;
    bottom: 38px;
    opacity: 0.7;
    overflow: hidden;
  }
  .pic_edit {
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    padding-bottom: 5px;
    .el-checkbox {
      padding:0 2px;
    }
    span {
      flex: 1;
      text-align: center;
      color: #409eff;
      cursor: pointer;
    }
  }
}
.page1 {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
:deep(.el-card__body) {
  padding: 0px !important;
}
</style>
